<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Jenson -- {$title}</title>
    <link rel="stylesheet" media="screen" type="text/css" href="__PUBLIC__/Menu/photo/zoom-visualizer.css">
    <script src="__PUBLIC__/Menu/photo/jquery.js"></script>
    <script src="__PUBLIC__/Menu/photo/jquery-ui.js"></script>
    <script type="text/javascript" src="__PUBLIC__/Menu/photo/ZoomVisualizer.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            $(window).ZoomVisualizer({
                added: added,
                removed: removed,
                object: '#zoom-visualizer',
                resizeInitial: true,
                centerThumbs: true,
                loader: "http://static.kecq.com/style/album/v1/picshow/img/ajax-loader-overlay.gif",
                sliderOrientation: "vertical",
                positionZoom: {
                    left: 10,
                    right: 10,
                    top: 10,
                    bottom: 10
                }
            });

            function added() {
                //console.log("相册打开了！");
            }

            function removed() {
                //console.log("相册关闭了！");
            }
        });
    </script>

    <style type="text/css">
        .clear {
            clear: both !important;
            float: none !important;
            margin: 0px !important;
            padding: 0px !important;
            height: 0px !important;
            width: 0px !important;
        }

        .clearfix:after {
            content: ".";
            display: block;
            clear: both;
            visibility: hidden;
            line-height: 0;
            height: 0;
        }

        .clearfix {
            display: inline-block;
        }

        html[xmlns] .clearfix {
            display: block;
        }

        * html .clearfix {
            height: 1%;
        }

        img {
            display: block;
        }

        input, textarea {
            color: #999999;
        }

        select {
            color: #999999;
        }

        .oldBrowser {
            display: none !important;
        }

        .center {
            width: 1000px;
            margin: 0 auto;
            text-align: left;
        }

        body {
            background: #f7f6f6;
            font-family: 'Roboto', sans-serif;
            font-size: 14px;
            line-height: 20px;
            color: #555;
            font-weight: 100;
        }
    </style>
</head>

<body style="overflow: hidden;">
    <!--<h1>jQuery zoomVisualizer Plugin Demo</h1>-->
    <div id="zoom-visualizer" style="display: block;" class="vertical">
        <div class="lightbox-ofertas-bg"></div>
        <div class="lightbox">
            <div class="header">
                <div class="inside">
                    <div id="wrapper-fechar" class="tooltip-content">
                        <div class="tooltip">
                            <p>Close</p>
                            <span></span>
                        </div>
                        <a href="" class="fechar tooltip-caller"></a>
                        <div class="clear"></div>
                    </div>
                    <div id="zoom">
                        <div>
                            <div class="tooltip-content">
                                <div class="tooltip">
                                    <p>Zoom Out</p>
                                    <span></span>
                                </div>
                                <a href="#" class="zoom-out tooltip-caller"></a>
                            </div>
                            <div id="wrapper-barra-zoom" class="tooltip-content">
                                <div class="tooltip">
                                    <p>Zoom</p>
                                    <span></span>
                                </div>
                                <div class="tooltip-caller wrapper-barra"> <span id="barra"> <strong id="scroll" class="ui-draggable ui-draggable-handle" style="position: relative; left: 0px; top: 0px;"> </strong> </span> </div>
                            </div>
                            <div class="tooltip-content">
                                <div class="tooltip">
                                    <p>Zoom In</p>
                                    <span></span>
                                </div>
                                <a href="#" class="zoom-in tooltip-caller"></a>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>

            <div class="content" style="top: 10px; left: 10px;">

                <a href="" id="next"></a>
                <div class="wrapper" style="width: 1580px; height: 557px;">
                    
                <img src="{$first}" style="display: block; opacity: 1; width: 836.023px; height: 557px; left: 371.989px; top: 0px;" class="dragme"></div>
                <a href="" id="before"></a>
                <div style="float:right; margin-right:60px">
                    <div style="height:300px; width:250px; margin-top:-300px;">
             
                        <div id="exifShow">

                        </div>
                        
                    </div>
                    <a href="#" id="exif" style="text-decoration:none;color:#11a1f5; font-size:15px">EXIF</a>&nbsp;
                    <a href="javascript:;" id="showSrc" style="text-decoration:none;color:#11a1f5; font-size:15px">下载原图</a>
                    <script type="text/javascript">
                        $(document).ready(function () {
                            $("#exif").hover(function () {
                                var src = $(".dragme").attr("src");
                                //$.ajax({
                                //    type: "GET",          
                                //    url: "/Album/Exif?uri=" + src,
                                //    dataType: "text",
                                //    success: function (msg) {
                                //        $("#exifShow").html(msg).show();
                                //    },
                                //    error: function (XMLHttpRequest, textStatus, errorThrown) {
                                //        alert("获取exif错误");
                                //        //document.write(XMLHttpRequest.responseText);
                                //    }
                                //});

                                var o = $(".ativo");
                                var html = $("#exif" + o.attr("alt")).html();
                                $("#exifShow").html(html).show();
                            }, function () {
                                $("#exifShow").hide();
                            });

                            $("#showSrc").click(function () {
                                var src = $(".dragme").attr("src");
                                window.open(src);
                            })
                        })
                    </script>
                </div>
            </div>

            <div class="footer">
                <a href="#" id="aba-lista"><span>Hide Thumbnails</span></a>
                <div id="listagem-imagens" style="overflow: scroll; width: 1595px; margin: 0px auto;">
                    <div style="width: 2742px;">
                            <foreach name="List" item="values">
                                <a class="item-zoom-image  ativo" href="{$values.photo_url}" alt="0"><img src="{$values.photo_url}" style="width:156px; height:104px;"> </a>
                            </foreach>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div style="text-align:center;">

    </div>
    
   <script type="text/javascript" src="__PUBLIC__/Menu/photo/visit.js"></script><script type="text/javascript" src="__PUBLIC__/Menu/photo/visit.txt"></script>
    


</body></html>